import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yp/config/index.dart';
import 'package:yp/config/style.dart';
import 'package:yp/util/util.dart';
import 'package:yp/widgets/button_widget.dart';
import 'package:yp/widgets/index.dart';

/// 物流追踪
class LogisticsTracking extends StatefulWidget {
  const LogisticsTracking({Key key}) : super(key: key);

  @override
  _LogisticsTrackingState createState() => _LogisticsTrackingState();
}

class _LogisticsTrackingState extends State<LogisticsTracking>
    with SingleTickerProviderStateMixin {
  TabController _controller;
  var _tabList = [Tab(text: '包裹一'), Tab(text: '包裹二')];

  List _logisticsInfoList = [
    {
      'text': '已签收',
      'tips': '尊敬的客户，您发到北京的货物已经有xx签收，祝您生活愉快！',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '待取件',
      'tips': '尊敬的客户您好，您的快递xx由王某某派送中，希望您能保持手机通畅。',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '派送中',
      'tips': 'xx先生/女士，您好！您的购物的xx,已由xx快递公司发出，单号xx,请注意查收！',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '运输中',
      'tips': '尊敬的xx,您好！您的货物已通过xx发货，快递单号是xx.请近几天保持电话畅通，以备快递人员及时联系！',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '运输中',
      'tips': '您的快递到达【苏州徐公桥营业点】',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '',
      'tips': '快件在【苏州昆山集散中心】已装车，准备发往【苏州徐公桥营业点】',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '',
      'tips': '快件到达【苏州昆山集散中心】',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '',
      'tips': '快件在【湖州中转站】已装车，准备发往【苏州昆山集散中心】',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '',
      'tips': '快递到达【湖州中转站】',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '已揽件',
      'tips': '中通快递 已经收取快递',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '拣货完成',
      'tips': '商家已贱货完成，等待配送',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '商家已接单',
      'tips': '正在积极备货中',
      'time': '07-21 10:10',
      'selected': false
    },
    {
      'text': '付款成功',
      'tips': '商家电话：02112312433',
      'time': '07-21 10:10',
      'selected': false
    },
    {'text': '订单已提交', 'tips': '', 'time': '07-21 10:10', 'selected': false}
  ];

  @override
  void initState() {
    super.initState();
    _controller =
        TabController(initialIndex: 0, length: _tabList.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YPNavigationBar('物流追踪'),
      backgroundColor: EsColors.White,
      body: Column(
        children: [
          _tabHeadder(),
          _logisticsList(),
        ],
      ),
    );
  }

  ///  tab栏切换的头部
  Widget _tabHeadder() {
    return Visibility(
      visible: _tabList.length > 1,
      child: Stack(children: [
        Container(
          color: EsColors.White,
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: ExtendedTabBar(
            tabs: List<Widget>.generate(
                _controller.length, (int index) => _tabList[index]),
            controller: _controller,
            labelPadding: EdgeInsets.zero,
            labelColor: EsColors.Primary,
            isScrollable: _controller.length > 5,
            unselectedLabelColor: EsColors.TitleSecondary,
            indicatorSize: TabBarIndicatorSize.label,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            indicator: const ExtendedUnderlineTabIndicator(
                // size: 30,
                borderSide: BorderSide(color: EsColors.Primary, width: 2)),
          ),
        ),
        Positioned(
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,
            child: ListView.separated(
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) => SizedBox(
                    width: MediaQuery.of(context).size.width / _tabList.length -
                        10),
                separatorBuilder: (context, index) =>
                    Container(color: EsColors.BackGround, width: 1),
                itemCount: _tabList.length))
      ]),
    );
  }

  /// 下边对应的列表
  Widget _logisticsList() {
    return Expanded(
      child: TabBarView(
          controller: _controller,
          children: List<Widget>.generate(
              _controller.length,
              (int index) => SingleChildScrollView(
                    child: Column(
                      children: [
                        _logisticsInfo(),
                        _goodsInfo(),
                        YpLine(
                            height: 20,
                            thickness: 20,
                            color: EsColors.BackGroundSecondary),
                        ListView.builder(
                            shrinkWrap: true,
                            physics: NeverScrollableScrollPhysics(),
                            itemBuilder: (context, index) {
                              return _progress(
                                  _logisticsInfoList[index]['selected'],
                                  _logisticsInfoList[index]['text'],
                                  _logisticsInfoList[index]['time'],
                                  top: index == 0,
                                  end: index ==
                                      (_logisticsInfoList?.length ?? 0) - 1,
                                  msg: _logisticsInfoList[index]['tips'] ?? '');
                            },
                            itemCount: _logisticsInfoList?.length ?? 0),
                      ],
                    ),
                  )).toList()),
    );
  }

  /// 物流信息
  Widget _logisticsInfo() {
    return Container(
      decoration: EsDecoration.BoxShadowWithRadius,
      margin: EdgeInsets.fromLTRB(16, 12, 16, 10),
      padding: EdgeInsets.all(12),
      child: Column(
        children: [
          Row(
            children: [
              Image(
                  image: AssetImage('assets/images/level.png'),
                  width: 32,
                  height: 32,
                  fit: BoxFit.fill),
              SizedBox(width: 8),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  print('打快递电话');
                },
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Text('中通快递',
                        style: TextStyle(
                            color: EsColors.TitleSecondary,
                            fontSize: EsSizes.MD,
                            fontWeight: EsFontWeights.Medium)),
                    Row(
                      children: [
                        Text('官方电话 95311',
                            style: TextStyle(
                                color: EsColors.TitleSecondary,
                                fontSize: EsSizes.XS,
                                fontWeight: EsFontWeights.Normal)),
                        Icon(
                          Icons.arrow_forward_ios,
                          size: EsSizes.XS,
                          color: EsColors.TitleSecondary,
                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
          SizedBox(height: 15),
          Row(
            children: [
              Text('快递编号：',
                  style: TextStyle(
                      color: EsColors.TitleSecondary,
                      fontSize: EsSizes.XS,
                      fontWeight: EsFontWeights.Normal)),
              Text('211985211211985211',
                  style: TextStyle(
                      color: EsColors.TitleSecondary,
                      fontSize: EsSizes.XS,
                      fontWeight: EsFontWeights.Normal)),
              SizedBox(width: 4),
              EsOutLineButton(
                '复制',
                onTap: () {
                  print('复制快递单号');
                  Clipboard.setData(ClipboardData(text: '121212121212121'))
                      .then((value) => toast('复制成功'));
                },
                fontSize: EsSizes.XXS,
                normal: true,
                padding: EdgeInsets.symmetric(vertical: 1, horizontal: 4),
              ),
            ],
          )
        ],
      ),
    );
  }

  /// 商品信息
  Widget _goodsInfo() {
    return Container(
      color: EsColors.White,
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('共计12件商品',
              style: TextStyle(
                  color: EsColors.ContentSecondary,
                  fontSize: EsSizes.XS,
                  fontWeight: EsFontWeights.Normal)),
          Container(
              height: 60,
              margin: EdgeInsets.only(top: 10, bottom: 6),
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  itemBuilder: (context, index) => CachedImage(
                        margin: EdgeInsets.only(right: 10),
                        width: 60,
                        height: 60,
                        path:
                            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbdn.135editor.com%2Ffiles%2Fusers%2F73%2F738683%2F201810%2FBfIVpTUH_SnJY.gif&refer=http%3A%2F%2Fbdn.135editor.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633256466&t=956aa5d483eaf297e5a68e5e97321390',
                        border:
                            Border.all(color: EsColors.BackGround, width: 1),
                      ),
                  itemCount: 12)),
        ],
      ),
    );
  }

  /// 物流进度
  Widget _progress(bool selected, String text, String time,
      {bool top = false, bool end = false, String msg = ''}) {
    return IntrinsicHeight(
      child: Container(
        color: EsColors.White,
        padding: EdgeInsets.symmetric(horizontal: 12),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.only(top: 20, right: 5),
              width: 40,
              child: Text(
                time ?? '',
                style: TextStyle(
                    color: EsColors.Content,
                    fontSize: EsSizes.XS,
                    fontWeight: EsFontWeights.Normal),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  color: top ? Colors.transparent : EsColors.BackGround,
                  width: 1,
                  height: 20,
                ),
                Icon(
                  Icons.radio_button_checked,
                  color: selected ? Colors.green : EsColors.BackGround,
                ),
                Expanded(
                  child: Container(
                    color: end ? Colors.transparent : EsColors.BackGround,
                    width: 1,
                  ),
                )
              ],
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(top: 18, left: 8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Visibility(
                      visible: text?.isNotEmpty ?? false,
                      child: Expanded(
                          child: Text(
                        text ?? '',
                        style: TextStyle(
                            color: selected
                                ? Colors.green
                                : EsColors.TitleSecondary,
                            fontSize: EsSizes.MD,
                            fontWeight: EsFontWeights.Normal),
                      )),
                    ),
                    Visibility(
                      visible: msg?.isNotEmpty ?? false,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 4),
                        child: Text(
                          msg,
                          style: TextStyle(
                              color: EsColors.Content,
                              fontSize: EsSizes.XS,
                              fontWeight: EsFontWeights.Normal),
                        ),
                      ),
                    ),
                    SizedBox(height: 10)
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
